Project Part 1

Building the Home Town App (Part 1 of 3)

Let's put your newfound knowledge to the test! For this exercise, make some updates to the Home Town project. Feel free to start coding right away in the Workspace below, or download the projects files here:

At this point, open up the starter code. Right now, we've got two columns (text and images), as well as the weather and sports scores. When we resize the page, it's pretty clear that the content is no longer fitting the browser. Let's go ahead and make it responsive!

First add a <meta> viewport to the page and don't forget to set the initial scale. Then, make any adjustments to the CSS and markup so that everything displays in a single column. Be sure to use relative widths so that things stretch to fit across any viewport width.

html <meta name="viewport" content="width=device-width, initial-scale=1.0">

Then, finally check your touch targets and make sure that they're big enough. Once you've made your
changes, test your site across different viewports (try it on phones tablets and different desktops!).

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

Default file path:
Workspace type: html-live
Opened files (when workspace is loaded): n/a

Task Description:

How do things look?

Task Feedback:

Excellent work!